<template>
  <el-dialog
    title="分配角色"
    v-model="setRoleDialogVisible"
    width="50%"
    @close="setRoleDialogClose"
  >
    <div>
      <p>当前的用户：{{ userInfo.userName }}</p>
      <p>当前的角色：{{ userInfo.roleName }}</p>
      <p>
        分配新角色：
        <el-select v-model="selectRoleId" multiple placeholder="请选择">
          <el-option
            v-for="item in roleList"
            :key="item.id"
            :label="item.roleName"
            :value="item.id"
          >
          </el-option>
        </el-select>
      </p>
    </div>
    <!-- 底部区域 -->
    <template #footer>
      <span class="dialog-footer">
        <el-button @click="setRoleDialogClose">取 消</el-button>
        <el-button type="primary" @click="setRole">确 定</el-button>
      </span>
    </template>
  </el-dialog>
</template>

<script>
import { allotUserRole } from "network/user.js";
export default {
  props: {
    setRoleDialogVisible: {
      type: Boolean,
      default: false
    },
    userInfo: {
      type: Object,
      default: {}
    },
    roleList: {
      type: Object,
      default: {}
    }
  },
  data() {
    return {
      selectRoleId: []
    };
  },
  emits: ["setRoleDialogClose"],
  methods: {
    setRoleDialogClose(isReload) {
      this.selectRoleId = [];
      this.$emit("setRoleDialogClose", false);
    },
    async setRole() {
      //   console.log(this.selectRoleId);
      const ids = this.selectRoleId.join(",");
      const res = await allotUserRole(this.userInfo.id, ids);
      if (!res.success)
        return this.$message.error({ showClose: true, message: res.msg });
      this.$message.success({ showClose: true, message: res.msg });
      this.selectRoleId = [];
      this.$emit("setRoleDialogClose", true);
    }
  }
};
</script>

<style lang="less" scoped></style>
